<template>
    <div class="mainContent">
        <div class="scorll">
            <div class="content">
                <div class="search" style="border-radius: 10px;">
                    <div class="left">
                        <Tabs v-model="tabActiveName">
                            <TabPane :label="`全部（${totalCount>99?'99+':totalCount}）`" name="0"></TabPane>
                            <TabPane :label="`我提交的（${submitCount>99?'99+':submitCount}）`" name="1"></TabPane>
                            <TabPane v-if="btnList.includes('fmam/plan/check')" :label="`待审批的（${pendingCount>99?'99+':pendingCount}）`" name="2"></TabPane>
                            <TabPane v-if="btnList.includes('fmam/plan/review')" :label="`待复查的（${reviewCount>99?'99+':reviewCount}）`" name="3"></TabPane>
                            <TabPane v-if="btnList.includes('fmam/plan/verify')" :label="`待核验的（${checkCount>99?'99+':checkCount}）`" name="4"></TabPane>
                        </Tabs>
                    </div>
                    <div class="right">
                        <el-button v-if="btnList.includes('fmam/plan/add')" type="primary" @click="$router.push({ path: '/fmam/plan/add' })" plain>+ 材料计划</el-button>
                    </div>
                </div>
                <div class="search searchBox" style="border-radius: 10px;">
                    <div class="left" style="width:35%;">
                        <span>提交日期：</span>
                        <DatePicker type="daterange" :clearable="true" v-model="dateArr" v-if="inputShow" format="yyyy-MM-dd" placement="top" transfer  placeholder="请选择日期" style="width: 300px;" @on-change="getDateArr" ></DatePicker>
                        <DatePicker type="daterange" format="yyyy-MM-dd" placement="top"  placeholder="请选择日期" v-if="inputShow" style="opacity:0;position: absolute;top:-9999px;width:1px;"></DatePicker>
                    </div>
                    <div class="right" style="display: flex;justify-content: flex-start;align-items: center;" v-if="tabActiveName == 0 || tabActiveName == 1">
                        <span>计划状态：</span>
                            <CheckboxGroup v-model="checkList">
                            <Checkbox :label="item.id" v-for="item in checkBoxList" :key="item.id">
                                <span>{{item.name}}</span>
                            </Checkbox>
                        </CheckboxGroup>
                    </div>
                </div>
                <div class="tabBox" style="padding-top:0.2rem;">
                    <div class="tableList">
                        <el-table :data="list" style="width: 100%" :stripe="true">
                            <el-table-column prop="name" label="计划名称" align="center"></el-table-column>
                            <el-table-column prop="userName" label="提交人" align="center"></el-table-column>
                            <el-table-column prop="planTime" label="提交时间" align="center"> </el-table-column>
                            <el-table-column label="附件" width="150px" align="center">
                                <template slot-scope="scope">
                                    <img v-if="scope.row.type == 1" src="../../assets/images/fmam/plan/fmam_exel.png" alt="" style="width: 0.24rem;height:0.24rem;">
                                    <img v-if="scope.row.type == 2" :src="scope.row.fileUrl" alt="" style="width: 0.24rem;height:0.24rem;">
                                    <img v-if="scope.row.type == 3" src="../../assets/images/fmam/plan/fmam_word.png" alt="" style="width: 0.24rem;height:0.24rem;">
                                    <span v-if="!scope.row.fileUrl"> —</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="state" label="状态"  align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.state == 10" style="color:#FF4848">待审批</span>
                                    <span v-if="scope.row.state == 11" style="color:#A9B0BB">未通过</span>
                                    <span v-if="scope.row.state == 12" style="color:#1891FF">审批合格</span>
                                    <span v-if="scope.row.state == 20" style="color:#FFA64D">待复查</span>
                                    <span v-if="scope.row.state == 30" style="color:#3755A7">待核验</span>
                                    <span v-if="scope.row.state == 100" style="color:#28D79C">已通过</span>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作"  align="center">
                                <template slot-scope="scope">
                                    <el-button  @click="$router.push({ path: '/fmam/plan/details',query: {planId: scope.row.planId}})" type="text" size="small" v-preventReClick="1500" style="color:RGBA(64, 158, 255, 1);">查看详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="clearfix"   >
                        <div class="float-right">
                            <Page v-if="count" style="margin: 10px 0;text-align: center;" :current.sync="current" :total="count" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
    getFmamPlanList,
    getFmamPlanListCount
} from "@/api/fmam.js";
export default {
    data() {
        return {
            dateArr:[],
            btnList:[],
            checkList:[10,20,30,11,100],
            checkBoxList:[
                {
                    id:10,
                    name:'待审批'
                },
                {
                    id:20,
                    name:'待复查'
                },
                {
                    id:30,
                    name:'待核验'
                },
                {
                    id:11,
                    name:'未通过'
                },
                {
                    id:100,
                    name:'已通过'
                },
            ],
            tabActiveName:"0",
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: 0,
            submitCount: 0,
            checkCount: 0,
            pendingCount: 0,
            reviewCount: 0,
            count: 0,
            list: [],
            state: 0,
            inputShow: false,
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.state = 0;
                this.pageNum = 1;
                this.current = 1;
                this.machRuleType = -1;
                this.dateArr = [];
                this.checkList = [];
                this.getAllList();
                this.getFmamPlanListCountFn();
            }
        },
        tabActiveName(val ,oldVal){
            if(val != oldVal){
                this.checkList = [10,20,30,11,100];
                this.pageNum = 1;
                this.current = 1;
                this.getAllList();
            }
        },
        checkList(val,oldVal){
            if(val.length != oldVal.length){
                this.pageNum = 1;
                this.current = 1;
                this.getAllList();
                // this.getFmamPlanListCountFn();
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getAllList();
        this.getFmamPlanListCountFn();
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        setTimeout(()=>{
            this.inputShow = true;
        },1)
    },
    methods: {
        //获取列表
        getAllList() {
            let states;
            if(this.tabActiveName <= 1){
                states = this.checkList.join(',');
            }else if(this.tabActiveName == 2){
                states = '10';
            }else if(this.tabActiveName == 3){
                states = '20';
            }else if(this.tabActiveName == 4){
                states = '30';
            }
            let parmas = {
                deptId: this.deptId,
                type: this.tabActiveName > 1 ? 0 : this.tabActiveName,
                states,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startDate: this.dateArr[0],
                endDate: this.dateArr[1]
            };
            getFmamPlanList(parmas)
            .then(res => {
                if (res.code == 200) {
                    this.list = res.data.list;
                    this.count = res.data.total;
                    if(this.tabActiveName == 0){
                        this.totalCount = res.data.total;
                    }else if(this.tabActiveName == 1){
                        this.submitCount = res.data.total;
                    }
                    this.list.forEach(v => {
                        let type = v.fileUrl.substring(v.fileUrl.lastIndexOf(".")+1);
                        if(type == 'xls' || type == 'xlsx'){
                            v.type = 1;
                        }else if(type == 'png' || type == 'jpg' || type == 'jpeg' || type == 'JPG' || type == 'JPEG' || type == 'PBG'){
                            v.type = 2;
                        }else if(type == 'doc'){
                            v.type = 3;
                        }
                    })
                } else {
                    /* 错误请求阻止 */
                    // this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        // 获取数据统计
        getFmamPlanListCountFn() {
            let states;
            if(this.tabActiveName <= 1){
                states = this.checkList.join(',');
            }else if(this.tabActiveName == 2){
                states = '10';
            }else if(this.tabActiveName == 3){
                states = '20';
            }else if(this.tabActiveName == 4){
                states = '30';
            }
            let parmas = {
                deptId: this.deptId,
                type: this.tabActiveName,
                states,
                startDate: this.dateArr[0],
                endDate: this.dateArr[1]
            };
            getFmamPlanListCount(parmas)
            .then(res => {
                if (res.code == 200) {
                    this.totalCount = res.data.totalCount;
                    this.submitCount = res.data.submitCount;
                    this.checkCount = res.data.checkCount;
                    this.pendingCount = res.data.pendingCount;
                    this.reviewCount = res.data.reviewCount;
                } else {
                    /* 错误请求阻止 */
                    // this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        getDateArr(i,v){
            this.dateArr = i;
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
            this.getFmamPlanListCountFn();
        },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        // 下载附件
        download(url){
            if(url){
                window.open(url);
            }else{
                this.$Message.warning("暂无附件");
            }
        },
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style scoped lang="scss">
@import "./../../assets/style/fmam/mainContent.scss";
.active {
    background: var(--themeColor) !important;
    border: var(--themeColor) !important;
    color: #fff !important;
}
</style>
